<template>
	<view class="flex-col page">
		<view class="flex-col">

			<view class="flex-row section " :class="curClass">
				<view class="flex-col justify-center items-center shrink-0 self-center image-wrapper"
					@click="goUserInfo">
					<image class="image_2" :src="userinfo.user.meta.avatar" v-if="userinfo.user.meta.avatar" />
					<u-icon name="camera" size="32" v-else></u-icon>
				</view>
				<view class="ml-10 flex-col items-start flex-1 self-center" v-if="token" @click="goUserInfo">
					<view style="color: #fff;">
						<text class="text info">{{userinfo.user.nickname}}</text>
					</view>
					<view lass="mt-15" style="padding: 20rpx 0;">
						<u-icon name="/static/image/level.png" :label="getLevel(userinfo.highestRole)" color="#fff"
							label-color="#fff"></u-icon>
					</view>
					<view class="mt-15">
						<u-icon name="phone" :label="userinfo.user.mobile" color="#fff" label-color="#fff"></u-icon>
					</view>

				</view>
				<view class="ml-10 flex-col items-center self-center " v-else @click="goLogin">
					<text class="text">请前往登录</text>
				</view>
				<view class="flex-col justify-center items-center " v-if="token" >
					<view class=" flex-col justify-start items-center show-group" v-if="!isShowReport" style="width: 280rpx; ">
						<view :class="curClass" style="width: 180rpx;color: #fff; font-size: 32rpx; padding: 5rpx 20rpx; border-radius: 10px; text-align: center;">我的积分</view>
						<view class="flex-col justify-center items-center " style="padding: 5px;">
							<view>
								{{userPoints.points}}/{{userPoints.pointsRequired}}
							</view>
							<view class=" " v-if="userPoints.qualified&&!userPoints.existPending" style="padding: 5px;" @click="apply">
								<text
									style="padding: 2px 10px ; background-color: #ff0101; margin: 2px 5px; color: #fff; border-radius: 5px;font-size: 28rpx;">申请开店</text>
							</view>
							<view class="  "  v-if="userPoints.existPending" @click="apply">
								<text
									style="padding: 2px 10px ; background-color: #ff0101; margin: 2px 5px; color: #fff; border-radius: 5px;font-size: 28rpx;">开店审批中</text>
							</view>
						</view>
					</view>
					<view v-else>
						<image :src="`/static/image/${userinfo.highestRole}.png`" style="width: 240rpx;"
							mode="widthFix"></image>
					</view>


				</view>



				<!-- 		<view class="ml-10 flex-col items-start shrink-0 self-center group" v-if="!isShowReport&&token"
					@click="goUserInfo">
					<text class="font text_2 info">所属店铺:{{userinfo.shop.nickname}}</text>
					<text class="mt-8 font text_4 info">店铺电话:{{userinfo.shop.mobile}}</text>
				</view> -->
			</view>
			<view class="flex-col section_2">
				<!-- <view class="flex-row justify-center relative group_2">
					<view class="flex-col justify-center flex-1"
						style="text-align: center;font-size: 28rpx; border-right: 1px solid #eee;">
						<view>
							售后待审核
						</view>
						<text style="color: #ff0101;font-size: 32rpx; font-weight: bold;">
							1
						</text>
					</view>
					<view class="flex-col justify-center flex-1"
						style="text-align: center;font-size: 28rpx;border-right: 1px solid #eee;">
						<view>
							邀请待确认
						</view>
						<text style="color: #ff0101;font-size: 32rpx; font-weight: bold;">
							1
						</text>
					</view>
					<view class="flex-col justify-center flex-1" style="text-align: center;font-size: 28rpx;" @click="goMessage">
						<view>
							消息留言
						</view>
						<text style="color: #ff0101;font-size: 32rpx; font-weight: bold;">
							1
						</text>
					</view>
				</view> -->
<!-- 				<view class="flex-row justify-between items-center group_6"
					v-if="!isShowReport&&userPoints&&userPoints.points">
					<view class="group_7">
						<text class="font text_11" style="font-size: 28rpx;">您的累计业绩：</text>
						<text class="font text_12" style="font-size: 28rpx;">{{userPoints.points}}/</text>
						<text class="font text_12" style="font-size: 28rpx;"> {{userPoints.pointsRequired}}</text>
					</view>

					<view class="flex-col justify-start items-center text-wrapper"
						v-if="userPoints.qualified&&!userPoints.existPending" @click="apply">
						<text class="font text_13" style="font-size: 28rpx;">申请开店</text>
					</view>
					<view class="flex-col justify-start items-center" style="background-color: #fff;" v-else>
						<view v-if="userPoints.existPending" style="color: #ff0101; font-weight: bold;">
							开店审批中
						</view>
					</view>
				</view> -->
			</view>
			<view class="flex-col justify-start section_3">
				<view class="flex-col list">
					<!-- 			<view class="flex-row justify-between items-center list-item" v-if="isShowReport"
						@click="goOrder('shop')">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/service.png" label="订单确认" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view> -->
					<view class="flex-row justify-between items-center list-item" @click="goAfter('customer')">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/service.png" label="售后查询" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item" v-if="isShowReport"
						@click="goWaitAfter('a_shop')">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/service.png" label="待退还的售后" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<!-- 	
					<view class="flex-row justify-between items-center list-item" v-if="isShowReport"
						@click="goAfter('b_shop')">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/service.png" label="售后审核(管理)" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view> -->
					<view class="flex-row justify-between items-center list-item" @click="goMessage">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/message.png" label="健康咨询" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item">
						<view class="flex-row items-center">
							<button open-type="contact">
								<u-icon name="/static/icons/kf.png" label="客户服务" size="20"></u-icon>
							</button>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item" @click="goMyCustomer">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/customerinterests.png" label="我的客户" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<!-- 					<view class="flex-row justify-between items-center list-item">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/contract.png" label="售后联系人管理" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view> -->
					<view class="flex-row justify-between items-center list-item" @click="goInvite">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/register.png" label="邀请注册" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item" @click="goMyAddress">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/address.png" label="地址管理" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item" @click="goChangePwd">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/password.png" label="修改密码" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/account.png" label="切换账号" @click="login" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
					<view class="flex-row justify-between items-center list-item" @click="logout">
						<view class="flex-row items-center">
							<u-icon name="/static/icons/logout.png" label="退出登录" size="20"></u-icon>
						</view>
						<u-icon name='arrow-right' color="#888"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<s-page-tabbar :show-report="isShowReport" :current="4"></s-page-tabbar>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				items: [],
				isShowReport: false,
				curPageNum: 4,
				userinfo: {},
				userPoints: {},
				token: "",
				curClass: "customer",
			};
		},
		onShow() {
			this.token = this.$store.state.userToken;

			if (this.token) {
				//this.userinfo = this.$store.state.userInfo;
				console.log(this.userinfo)

				this.getUserDetails()
				this.getMyPoints();
				
			} else {
				// uni.navigateTo({
				// 	url: '/pages-publics/login/login'
				// })
			}


		},

		methods: {
			getUserDetails() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/me`,
					data: {
			
					}
				}).then(res => {
					this.userinfo = res;
					this.$store.commit("ADD_USER", res)
					this.curClass = this.getHeaderClass(this.userinfo.highestRole);
					if (this.userinfo.highestRole == 'AG_CSR' || this.userinfo.highestRole == 'AU_CSR') {
						this.isShowReport = false
					
					} else {
					
						this.isShowReport = true;
					}
				})
			},
			goMyCustomer() {
				uni.navigateTo({
					url: '/pages-users/MyCustomer/MyCustomer'
				})
			},
			getHeaderClass(roles) {
				if (roles == "AG_CSR" || roles == "AU_CSR") {
					return 'customer'
				} else if (roles == "AG_SHOP" || roles == "AU_SHOP") {
					return 'shop'
				} else if (roles == "AG_WHS" || roles == "AU_WHS") {
					return 'whs'
				} else if (roles == "AG_AGENT" || roles == "AU_AGENT") {
					return 'agent'
				} else {
					return 'manager'
				}
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages-publics/login/login'
				})
			},
			goInvite() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-users/Invite/Invite'
				})
			},
			goUserInfo() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-users/UserInfo/UserInfo'
				})
			},
			goWaitAfter() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-aftersales/WaitAfter/WaitAfter'
				})
			},
			goOrder(roles) {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.setStorageSync('@langpin_Order_roles', roles);
				uni.switchTab({
					url: '/pages/order/order'
				})
			},
			goAfter(roles) {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.setStorageSync('@langpin_roles', roles);
				uni.switchTab({
					url: '/pages/aftersales/aftersales'
				})
			},
			goMessage() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-publics/message/message?channel=healthConsult'
				})
			},
			goMyAddress() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-users/address/address'
				})
			},
			getLevel(level) {

				return this.$Utils.getUserLevel(level)
			},
			getMyPoints() {
				this.$get({
					url: `${this.$Utils.ApiUrl}/vitality/points/mine`
				}).then(res => {
					this.userPoints = res;
					console.log(res)

				})
			},
			tabChange(url) {
				uni.switchTab({
					url
				})
			},
			apply() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-users/ApplyShop/ApplyShop'
				})
			},
			login() {

				uni.navigateTo({
					url: '/pages-publics/login/login'
				})
			},
			logout() {
				this.$store.commit("LOGOUT")
				uni.navigateTo({
					url: '/pages-publics/login/login'
				})
			},
			goChangePwd() {
				if (!this.token) {
					uni.navigateTo({
						url: '/pages-publics/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages-users/ChangePwd/ChangePwd'
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	button {
		padding: 0;
		background-color: transparent;
	}

	button::after {
		border: 0;
	}

	.show-group {
		background-color: rgba(255, 255, 255, 0.9);
		box-shadow: 1px 2px 3px #888;
		border-radius: 10px;
		padding: 10rpx;
	}

	.CUS {
		background-color: #2e87c4;
	}

	.ml-7 {
		margin-left: 12.21rpx;
	}

	.mt-136 {
		margin-top: 237.21rpx;
	}

	.ml-55 {
		margin-left: 95.93rpx;
	}

	.page {
		background-color: #f6f6f6;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.image {
			width: 100vw;
			height: 25.5814vw;
		}

		.section {
			padding: 41.4rpx 20.47rpx 41.4rpx 20.44rpx;

			background-size: 100% 100%;
			background-color: #ff0101;
			background-repeat: no-repeat;




			.image-wrapper {
				padding: 3.49rpx 0;
				background-color: #ffffff;
				border-radius: 61.05rpx;
				width: 122.09rpx;
				height: 122.09rpx;

				.image_2 {
					border-radius: 57.56rpx;
					width: 115.12rpx;
					height: 115.12rpx;
				}
			}

			.text {
				color: #ffffff;
				font-family: SourceHanSansCN;
				font-weight: 700;
				line-height: 29.04rpx;
			}

			.info {

				border-radius: 3px;
				padding: 5rpx 10rpx;
			}

			.font_2 {
				font-size: 28rpx;
				font-family: SourceHanSansCN;
				color: #fff;
			}

			.text_3 {}

			.group {


				.text_2 {}

				.text_4 {}
			}
		}

		.customer {
			background-color: #2e87c4;
		}

		.shop {
			background-color: #1ebea3;
		}

		.agent {
			background-color: #d04436;
		}

		.whs {
			background-color: #da8c10;
		}

		.manager {
			background-color: #9045ac;
		}

		.section_2 {
			padding: 0 20rpx;
			background-color: #ffffff;
			border-radius: 0rpx 0rpx 17.44rpx 17.44rpx;

			.group_2 {
				padding: 34.88rpx 10rpx;
				border-bottom: solid 1.74rpx #e5e5e5;

				.group_3 {
					width: 164.62rpx;
					height: 54.21rpx;
					border-right: solid 1.74rpx #e5e5e5;

					.text_5 {
						font-size: 28rpx;
						line-height: 21.07rpx;
					}

					.pos_2 {
						position: absolute;
						left: 3.99rpx;
						top: 0;
					}

					.text_8 {
						font-size: 28rpx;
					}

					.pos_4 {
						position: absolute;
						left: 54.09rpx;
						bottom: 0;
					}
				}

				.pos {
					position: absolute;
					left: 26.39rpx;
					bottom: 24.28rpx;
				}

				.group_4 {
					width: 164.62rpx;

					.text_6 {
						font-size: 22.67rpx;
						line-height: 20.95rpx;
					}

					.text_9 {
						font-size: 22.67rpx;
					}
				}

				.font_4 {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
					line-height: 16.62rpx;
					color: #ff0101;
				}

				.group_5 {
					width: 164.62rpx;
					border-left: solid 1.74rpx #e5e5e5;

					.text_7 {
						font-size: 28rpx;
						line-height: 21.09rpx;
					}

					.text_10 {
						margin-right: 38.37rpx;
						font-size: 28rpx;
					}
				}

				.pos_3 {
					position: absolute;
					right: 42.96rpx;
					bottom: 22.53rpx;
				}
			}

			.group_6 {
				padding: 16.98rpx 10.47rpx;

				.group_7 {
					line-height: 19.4rpx;
					height: 19.4rpx;

					.text_11 {
						color: #000000;
					}

					.text_12 {
						color: #ff0101;
						line-height: 15.89rpx;
					}
				}

				.text-wrapper {
					padding: 20rpx 0;
					background-color: #ff0101;
					border-radius: 26.16rpx;
					width: 143.02rpx;

					.text_13 {
						line-height: 19.27rpx;
					}
				}
			}
		}

		.font {
			font-size: 28rpx;
			font-family: SourceHanSansCN;

			color: #ffffff;
		}

		.section_3 {
			margin-top: 10.47rpx;
			padding: 38.37rpx 0 55.81rpx;
			background-color: #ffffff;
			border-radius: 8.72rpx;

			.list {
				margin: 0 13.95rpx;

				.list-item {
					padding: 30.93rpx 16rpx;

					.image_3 {
						width: 52.33rpx;
						height: 52.33rpx;
					}

					.text_14 {
						line-height: 22.57rpx;
					}

					.image_4 {
						margin-right: 6.98rpx;
						width: 34.88rpx;
						height: 34.88rpx;
					}
				}
			}
		}

		.font_3 {
			font-size: 24.42rpx;
			font-family: SourceHanSansCN;
			line-height: 22.64rpx;
			color: #000000;
		}

		.section_4 {
			padding: 12.21rpx 0 50.58rpx;
			background-color: #fafafa;

			.equal-division-item {
				width: 48.84rpx;
				height: 48.84rpx;
			}
		}
	}
</style>